<template>
  <div>
    <div class="input">
      <div v-for="(item, index) in 6" :key="index" :class="['box-item']">
        <span>{{ text[index] }}</span>
      </div>
    </div>
    <div ref="cusBoard" class="cus-board">
      <div v-for="(line, index) in list" :key="index" class="letter-line">
        <!-- 收起键盘 -->
        <div v-if="index === list.length - 1" class="action">
        </div>
        <div v-for="item in line" :key="item.label" :class="['item', item.label == 1 ? 'center' : '']">
          <span>{{ item.label }}</span>
          <span v-if="item.str">{{ item.str }}</span>
        </div>
        <!-- 删除 -->
        <div v-if="index === list.length - 1" class="item action">
          ×
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import list from './config.js'
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: list
    }
  }
}
</script>

<style>
.input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.box-item {
  flex-basis: 35px;
  height: 40px;
  border: 1px solid #bfbfbf;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cus-board {
  font-size: 15px;
  width: 375px;
  background: rgb(246, 247, 246);
  padding: 10px 5px 6px 5px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.letter-line {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item,
.action {
  width: 120px;
  height: 50px;
  border-radius: 5px;
  background-color: white;
  margin-right: 5px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.center {
  justify-content: flex-start;
}
.action {
  background: transparent;
}
.item:nth-child(3n) {
  margin-right: 0;
}
</style>